<template>
  <div class="school">
    <van-tabs v-model:active="activeName">
      <van-tab title="喵星人" name="a" class="miao">
        <span>入门课堂</span>
        <van-grid
          :column-num="3"
          gutter="20"
          class="pets cat"
          @click="click"
        >
          <van-grid-item
            v-for="value in arr"
            :key="value.text"
            :icon="value.icon"
            :text="value.text"
          />
        </van-grid>
        <span>进阶课堂</span>
        <van-grid
          :column-num="3"
          gutter="20"
          class="pets cat"
          @click="click"
        >
          <van-grid-item
            v-for="value in 4"
            :key="value"
            icon="fire"
            text="咬人"
          />
        </van-grid>
        <p>
          更多养宠知识<br>
          请关注宠物论坛公众号:nb123456
        </p>
      </van-tab>
      <van-tab title="汪星人" name="b">
        <span>入门课堂</span>
        <van-grid
          :column-num="3"
          gutter="20"
          class="pets dog"
          @click="click"
        >
          <van-grid-item
            v-for="value in brr"
            :key="value.text"
            :icon="value.icon"
            :text="value.text"
          />
        </van-grid>
        <span>进阶课堂</span>
        <van-grid
          :column-num="3"
          gutter="20"
          class="pets dog"
          @click="click"
        >
          <van-grid-item
            v-for="value in 4"
            :key="value"
            icon="smile"
            text="捡垃圾吃"
          />
        </van-grid>
        <p>
          更多养宠知识<br>
          请关注宠物论坛公众号:nb123456
        </p>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeName = ref('a')

const click = () => {
  console.log('nb')
}

const arr = [{
  text: '超哥猫',
  icon: 'like-o',
},
{
  text: '手贱猫',
  icon: 'phone-o',
},
{
  text: '拆家猫',
  icon: 'friends-o',
},
{
  text: '脱毛猫',
  icon: 'cart-o',
},
{
  text: '喊不听猫',
  icon: 'cart-circle-o',
},
{
  text: '没礼猫',
  icon: 'gem-o',
},
{
  text: '坤猫',
  icon: 'gift-o',
},
{
  text: '马保猫',
  icon: 'send-gift-o',
},
{
  text: '电子烟猫',
  icon: 'service-o',
},
{
  text: '猫病',
  icon: 'music-o',
},
{
  text: '鸡泥钛猫',
  icon: 'video-o',
},
{
  text: '喵喵喵',
  icon: 'wap-home-o',
}]

const brr = [{
  text: '布鲁斯',
  icon: 'like-o',
},
{
  text: '不归家狗',
  icon: 'phone-o',
},
{
  text: '土狗',
  icon: 'friends-o',
},
{
  text: '修沟',
  icon: 'cart-o',
},
{
  text: '短腿狗',
  icon: 'cart-circle-o',
},
{
  text: '指人哈士奇',
  icon: 'gem-o',
},
{
  text: '坤狗',
  icon: 'gift-o',
},
{
  text: '马保狗',
  icon: 'send-gift-o',
},
{
  text: '丁真狗',
  icon: 'service-o',
},
{
  text: '狗病',
  icon: 'music-o',
},
{
  text: '鸡泥钛狗',
  icon: 'video-o',
},
{
  text: '旺旺旺',
  icon: 'wap-home-o',
}]
</script>

<style lang="less" scoped>
::v-deep .school {
  padding-bottom: 50px;
}
::v-deep .van-tabs__nav {
  background-color: #f5ca2b;
}
.pets{
margin-top: 25px;
}
.cat{
  color: red;
}

.dog{
  color: #f5ca2b;
}
.school{
background-color: #f7f7f7;

}

span{
  display: block;
  width: 20%;
  height: 20px;
  font-size: 14px;
  line-height: 39px;
  margin-left: 18px;
  font-weight: bold;
}

p{
  text-align: center;
  margin-top: 30px;
  margin-left: 30px;
  font-size: 12px;
  color: #c4c8cd;
}

</style>
